<style lang="scss">
.ld-home {
  width: 100%;
  .top-div {
    width: 100%;
  }
  .top-div-item {
    // height: 100%;
    // vertical-align: middle;
    padding: 12px 0 0 0;
    border-right: 1px dotted #dddddd;
    border-bottom: 1px dotted #ddd;
    cursor: pointer;
    .top-div-item-box {
      float: left;
    }
    .top-div-icon {
      text-align: center;
      width: 50%;
      height: 72px;
      line-height: 76px;
      .top-icon {
        font-size: 36px;
      }
    }
    .top-div-name-value {
      text-align: left;
      width: 50%;
      .top-value {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 22px;
        font-weight: bold;
      }
      .top-name {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
      }
    }
  }
  .top-div-item:hover {
    background: #eeeeee;
  }
  .center-div {
    width: 100%;
    // height: 50vh;
    overflow: hidden;
    margin-top: 7px;
    border-top: 1px dotted #dddddd;
    border-bottom: 1px dotted #dddddd;
    // padding: 10px;
    .center-item {
      float: left;
    }
    .unsatify-div {
      width: 50%;
      .dept-day-chart-div {
        width: 100%;
        height: 360px;
        padding-top: 20px;
      }
    }
    .overdue-div {
      width: 50%;
      outline: 1px dotted #dddddd;
      .state-chart-div {
        width: 100%;
        height: 360px;
        padding-top: 20px;
      }
    }
    .source-div {
      width: 50%;
      outline: 1px dotted #dddddd;
      .source-chart-div {
        width: 100%;
        height: 360px;
        padding-top: 20px;
      }
    }
    .dept-effity-div {
      width: 50%;
      .con-cate-chart-div {
        width: 100%;
        height: 360px;
        padding-top: 20px;
      }
    }
  }
  .bottom-div {
    width: 100%;
    overflow: hidden;
    margin-top: 7px;
    border-top: 1px dotted #dddddd;
    border-bottom: 1px dotted #dddddd;
    margin-bottom: 77px;
    .bottom-item {
      float: left;
    }
    .dept-number-div {
      width: 100%;
      outline: 1px dotted #dddddd;
      .dept-number-chart-div {
        width: 100%;
        height: 400px;
        padding-top: 20px;
      }
    }
  }
}
</style>

<template>
  <div class="ld-home">
    <!-- 年月日类别超期件统计 -->
    <div class="top-div">
      <el-row>
        <el-col :span="8" class="year-div top-div-item" style="color: #B6A2DE">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span
              class="top-value"
            >{{ymdTypeDueCountData.yearCount ? ymdTypeDueCountData.yearCount : 0}} (件)</span>
            <span class="top-name">本年</span>
          </div>
        </el-col>
        <el-col :span="8" class="month-div top-div-item" style="color: #5AB1EF;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span
              class="top-value"
            >{{ymdTypeDueCountData.monthCount ? ymdTypeDueCountData.monthCount : 0}} (件)</span>
            <span class="top-name">本月</span>
          </div>
        </el-col>
        <el-col :span="8" class="day-div top-div-item" style="color: #2EC7C9;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span
              class="top-value"
            >{{ymdTypeDueCountData.dayCount ? ymdTypeDueCountData.dayCount : 0}} (件)</span>
            <span class="top-name">本日</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="tsjb-div top-div-item" style="color: #97B552;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-success top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span
              class="top-value"
            >{{ymdTypeDueCountData.handleEfficyCount ? ymdTypeDueCountData.handleEfficyCount : 0}} %</span>
            <span class="top-name">办结率（%）</span>
          </div>
        </el-col>
        <el-col :span="8" class="jyyj-div top-div-item" style="color: #E5CF0D;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-s-flag top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span
              class="top-value"
            >{{ymdTypeDueCountData.satifyEfficyCount ? ymdTypeDueCountData.satifyEfficyCount : 0}} %</span>
            <span class="top-name">满意率（%）</span>
          </div>
        </el-col>
        <el-col :span="8" class="zxfw-div top-div-item" style="color: #FFB980;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-time top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span
              class="top-value"
            >{{ymdTypeDueCountData.overdueEfficyCount ? ymdTypeDueCountData.overdueEfficyCount : 0}} %</span>
            <span class="top-name">超期率（%）</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 各处室今日预警统计 -->
    <div class="center-div">
      <el-row class="center-item unsatify-div" v-loading="unsatifyDivLoading">
        <!-- <h3 class="charts-title">今日预警</h3> -->
        <el-col :span="24">
          <div class="dept-day-chart-div" ref="unsatifyChartDiv" id="unsatifyChartDiv"></div>
        </el-col>
      </el-row>
      <el-row class="center-item overdue-div" v-loading="overdueDivLoading">
        <el-col :span="24">
          <div class="state-chart-div" ref="overdueChartDiv" id="overdueChartDiv"></div>
        </el-col>
      </el-row>
      <el-row class="center-item source-div" v-loading="sourceDivLoading">
        <el-col :span="24">
          <div class="source-chart-div" ref="sourceChartDiv" id="sourceChartDiv"></div>
        </el-col>
      </el-row>
      <el-row class="center-item dept-effity-div" v-loading="conCateDivLoading">
        <el-col :span="24">
          <div class="con-cate-chart-div" ref="contentCateChartDiv" id="contentCateChartDiv"></div>
        </el-col>
      </el-row>
    </div>
    <!-- 处室办理量统计 -->
    <div class="bottom-div">
      <el-row class="bottom-item dept-number-div" v-loading="deptNumDivLoading">
        <el-col :span="24">
          <div class="dept-number-chart-div" ref="deptNumberChartDiv" id="deptNumberChartDiv"></div>
        </el-col>
      </el-row>
      <!-- <el-row class="bottom-item dept-effity-div" v-loading="conCateDivLoading">
        <el-col :span="24">
          <div class="con-cate-chart-div" ref="contentCateChartDiv" id="contentCateChartDiv"></div>
        </el-col>
      </el-row>-->
    </div>
  </div>
</template>

<script>
// 引入基本模板
// 引入环形图图组件
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
// 引入提示框和title组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import pieEchartsOption from '@/utils/echarts/pie.js' // 引用统计图样式
let echarts = require('echarts/lib/echarts')

export default {
  data () {
    return {
      // 年月日类型超期件统计
      ymdTypeDueCountData: {
        yearCount: '',
        monthCount: '',
        dayCount: '',
        handleEfficyCount: '',
        satifyEfficyCount: '',
        overdueEfficyCount: ''
      },
      // 加载中
      unsatifyDivLoading: false,
      overdueDivLoading: false,
      sourceDivLoading: false,
      deptNumDivLoading: false,
      conCateDivLoading: false,
      // 今日预警处室列表
      deptDayListData: [],
      deptOverdueListData: [],
      sourceListData: [],
      // 处室办理量统计
      deptWorkData: {
        name: '',
        numbers: '',
        effcicy: ''
      },
      // 工单来源统计
      contentCateData: {
        name: '',
        value: ''
      }
    }
  },
  methods: {
    // 年月日类型超期件统计
    getYmdTypeDueCountsFn () {
      this.$axios.post(this.$api.homeCharts.ymdEffciencyCounts).then(rs => {
        if (rs) {
          this.ymdTypeDueCountData = Object.assign(
            this.ymdTypeDueCountData,
            rs
          )
        }
      })
    },
    // 处室不满意件环形图
    getDeptUnsatisfyCharts () {
      this.unsatifyDivLoading = true
      this.$axios.post(this.$api.homeCharts.deptUnsatisfyCharts).then(rs => {
        if (rs) {
          this.deptDayListData = rs
          let unsatifyLegendData = this.deptDayListData.map(item => ({
            name: `${item.name}`,
            value: item.value
          }))
          this.unsatifyDivLoading = false
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(this.$refs.unsatifyChartDiv)
          if (!myChart) return
          // 绘制图表
          let colorsList = [
            '#D87A80',
            '#FFB980',
            '#E5CF0D',
            '#97B552',
            '#2EC7C9',
            '#5AB1EF',
            '#B6A2DE',
            '#AA8C8A',
            '#909399'
          ]
          let myechartsOy = {
            title: {
              text: this.$moment().format('YYYY') + '年各处室不满意件统计',
              x: 'center'
            },
            color: colorsList,
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} ({d}%)'
            },
            series: [
              {
                name: '不满意件',
                radius: ['40%', '60%'],
                roseType: '',
                data: unsatifyLegendData,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: true
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myechartsOy = pieEchartsOption(myechartsOy)
          myChart.setOption(myechartsOy)
        }
      })
    },
    // 处室超期件统计
    getDeptOverdueCharts () {
      this.overdueDivLoading = true
      this.$axios.post(this.$api.homeCharts.deptOverdueCharts).then(rs => {
        if (rs) {
          this.deptOverdueListData = rs
          let dueLegendData = this.deptOverdueListData.map(item => ({
            name: `${item.name}`,
            value: item.value
          }))
          this.overdueDivLoading = false
          let myChart = echarts.init(this.$refs.overdueChartDiv)
          if (!myChart) return
          // 绘制图表
          let colorsList = [
            '#D87A80',
            '#FFB980',
            '#E5CF0D',
            '#97B552',
            '#2EC7C9',
            '#5AB1EF',
            '#B6A2DE',
            '#AA8C8A',
            '#909399'
          ]
          let myechartsOyt = {
            title: {
              text: this.$moment().format('YYYY') + '年各处室超期件统计',
              x: 'center'
            },
            color: colorsList,
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} ({d}%)'
            },
            series: [
              {
                name: '超期件',
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['30%', '56%'],
                roseType: 'radius',
                data: dueLegendData,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      textStyle: {
                        fontSize: 16,
                        fontWeight: 'bolder',
                        fontFamily: 'Microsoft YaHei,微软雅黑'
                      }
                    },
                    labelLine: {
                      show: true
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myechartsOyt = pieEchartsOption(myechartsOyt)
          myChart.setOption(myechartsOyt)
        }
      })
    },
    // 工单来源统计
    getSourceCharts () {
      this.sourceDivLoading = true
      this.$axios.post(this.$api.homeCharts.leaderSourceCharts).then(rs => {
        if (rs) {
          this.sourceListData = rs
          let sourceLegendData = this.sourceListData.map(item => ({
            name: `${item.name}`,
            value: item.value
          }))
          // console.log("333", sourceLegendData);
          this.sourceDivLoading = false
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(this.$refs.sourceChartDiv)
          if (!myChart) return
          // 绘制图表
          let colorsList = [
            '#D87A80',
            '#FFB980',
            '#E5CF0D',
            '#97B552',
            '#2EC7C9',
            '#5AB1EF',
            '#B6A2DE',
            '#AA8C8A',
            '#909399'
          ]
          let myechartsOyss = {
            title: {
              text: this.$moment().format('YYYY') + '年工单来源统计',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} ({d}%)'
            },
            color: colorsList,
            series: [
              {
                name: '工单来源',
                radius: ['0%', '60%'],
                roseType: '',
                data: sourceLegendData,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      // position: "top",
                      textStyle: {
                        fontSize: 16,
                        fontWeight: 'bolder',
                        fontFamily: 'Microsoft YaHei,微软雅黑'
                      }
                    },
                    labelLine: {
                      show: true
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          myechartsOyss = pieEchartsOption(myechartsOyss)
          myChart.setOption(myechartsOyss)
        }
      })
    },
    // 各处室工单办理量统计
    getDeptNumberAndEffcientcyCharts () {
      this.deptNumDivLoading = true
      this.$axios
        .post(this.$api.homeCharts.deptWorkAndEfficiencyCharts)
        .then(rs => {
          if (rs) {
            this.deptWorkData = rs
            this.deptNumDivLoading = false
            // console.log(this.deptWorkData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.deptNumberChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年各处室工单处理量统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                // formatter: "{a} <br/>{b} : {c} ",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                data: ['处理量(件)', '处理时效(天)'],
                y: 'top',
                right: 120,
                selectedMode: false // 取消图例上的点击事件
              },
              xAxis: {
                type: 'category',
                data: this.deptWorkData.name.split(','),
                axisLabel: {
                  // 调整x轴的lable
                  interval: 0, // 全部显示
                  clickable: false, // 可点击
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                }
              },
              yAxis: [
                {
                  type: 'value',
                  name: '处理量(件)',
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                },
                {
                  type: 'value',
                  name: '处理时效(天)',
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      formatter: '{value}',
                      textStyle: {
                        fontSize: 16 // 让字体变大
                      }
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                }
              ],
              series: [
                {
                  data: this.deptWorkData.numbers.split(','),
                  name: '处理量(件)',
                  type: 'bar',
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#5AB1EF',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 16 // 让字体变大
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      { type: 'max', name: '最大值' },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#5AB1EF'
                      }
                    }
                  }
                },
                {
                  data: this.deptWorkData.effcicy.split(','),
                  name: '处理时效(天)',
                  type: 'line',
                  smooth: true,
                  yAxisIndex: 1,
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 14, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      color: '#97B552',
                      lineStyle: {
                        color: '#97B552'
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      { type: 'max', name: '最大值' },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#97B552'
                      }
                    }
                  }
                }
              ]
            })
          }
        })
    },
    // 工单类别统计
    getContentCateCharts () {
      this.conCateDivLoading = true
      this.$axios.post(this.$api.homeCharts.contentCateCharts).then(rs => {
        if (rs) {
          this.contentCateData = rs
          this.conCateDivLoading = false
          // 基于准备好的dom，初始化echarts实例
          this.$nextTick(() => {
            let myChart = echarts.init(this.$refs.contentCateChartDiv)
            if (!myChart) return
            // console.log(123123);

            // 绘制图表
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年工单类别Top5',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                top: '32px',
                bottom: '36px',
                left: '132px',
                right: '99px',
                containLabel: false
              },
              calculable: false,
              xAxis: {
                type: 'value',
                name: '数量(件)',
                axisLabel: {
                  // 调整y轴的lable
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                },
                nameTextStyle: {
                  fontSize: 14,
                  fontFamily: 'Microsoft YaHei,微软雅黑'
                }
              },
              yAxis: {
                type: 'category',
                data: this.contentCateData.name.split(',').reverse(),
                axisLabel: {
                  // 调整x轴的lable
                  interval: 0, // 全部显示
                  clickable: false, // 可点击
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                }
              },
              series: [
                {
                  name: '工单类别',
                  type: 'bar',
                  data: this.contentCateData.value.split(',').reverse(),
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#5AB1EF',
                      label: {
                        show: true,
                        position: 'right',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                }
              ]
            })
          })
        }
      })
    }
  },
  mounted: function () {
    this.getYmdTypeDueCountsFn()
    this.getDeptUnsatisfyCharts()
    this.getDeptOverdueCharts()
    this.getSourceCharts()
    this.getDeptNumberAndEffcientcyCharts()
    this.getContentCateCharts()
  }
}
</script>
